<template>
  <div class="freightemplate">
    <store-leftmenus active="3"></store-leftmenus>
    <div class="freightemplate-main">
      <Breadcrumb :title="title"></Breadcrumb>
      <div class="freightemplate-main_content">
        <div>
          <div class="contenttitle">运费模板</div>
          <div class="freightemplate-main_contentFirst">
            <div class="main_contentFirst-header">
              <el-button type="primary" @click="freightAdd(-1)">添加</el-button>
            </div>
            <el-table :data="tableData" border style="width: 100%" v-loading="loading">
              <el-table-column prop="name" label="模板名称"></el-table-column>
              <el-table-column prop="templateType1" label="类型"></el-table-column>
              <el-table-column prop="firstPrice" label="首件（元）" align="center"></el-table-column>
              <el-table-column prop="continuePrice" label="续件（元）" align="center"></el-table-column>
              <el-table-column prop="des" label="模板说明"></el-table-column>
              <el-table-column prop="isDefault" label="是否默认">
                <template slot-scope="scope">
                  <span v-if="scope.row.isDefault === 1">默认模板</span>
                </template>
              </el-table-column>
              <el-table-column prop="addTime" label="添加时间" width="180"></el-table-column>
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <el-button size="mini" @click="freightEdit(scope.row)">编辑</el-button>
                  <el-button size="mini" type="danger" @click="freightDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="新建模板" :visible.sync="dialogVisible" width="30%">
      <span>
        <div class="dialog-input">
          <p>模板名称：</p>
          <el-input type="text" placeholder="请输入模板名称" v-model="storeFreightTemDto.name"></el-input>
        </div>
        <div class="dialog-input">
          <el-radio v-model="storeFreightTemDto.label" label="1">按件数</el-radio>
          <!-- <el-radio v-model="storeFreightTemDto.label" label="2">按重量</el-radio> -->
        </div>
        <div class="dialog-input">
          <div class="dialog-input">
            <p>首件：</p>
            <el-input type="text" placeholder="请输入" v-model="storeFreightTemDto.firstLabel"></el-input>
            <p>元</p>
          </div>
          <div class="dialog-input">
            <p>续件：</p>
            <el-input type="text" placeholder="请输入" v-model="storeFreightTemDto.lastLabel"></el-input>
            <p>元</p>
          </div>
        </div>
        <div class="dialog-input">
          <p>模板说明：</p>
          <el-input
            type="textarea"
            placeholder="请输入模板说明"
            v-model="storeFreightTemDto.content"
            :rows="4"
          ></el-input>
        </div>
        <div class="dialog-input">
          <el-checkbox v-model="storeFreightTemDto.type">设置为默认模板</el-checkbox>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendOver">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import StoreLeftmenus from "@/views/components/StoreLeftmenus";
import Breadcrumb from "@/views/components/Breadcrumb";
import { mapState } from "vuex";
import { getTime } from "@/utils/service.js";
export default {
  data() {
    return {
      title: {
        group: "店铺管理",
        name: "运费模板管理",
      },
      tableData: [],
      loading: false,
      dialogVisible: false,
      storeFreightTemDto: {
        name: "",
        label: "1",
        firstLabel: null,
        lastLabel: null,
        content: "",
        type: false,
        temState: null,
      },
    };
  },
  created() {
    this.getStoreFreightTemList();
  },
  methods: {
    async getStoreFreightTemList() {
      //  获取运费模板
      this.loading = true;
      let obj = {
        storeId: this.print.id,
      };
      const res = await this.axios.getStoreFreightTemList(obj);
      this.tableData = res.data.data;
      this.tableData.map((el) => {
        el.addTime = getTime(el.addTime);
        if (el.templateType === 1) {
          el.templateType1 = "按件数";
        } else {
          el.templateType1 = "按重量";
        }
      });
      this.loading = false;
    },
    async addStoreFreightTemList() {
      //  添加运费模板
      let obj = {
        continueAmount: 1,
        continuePrice: parseInt(this.storeFreightTemDto.lastLabel),
        des: this.storeFreightTemDto.content,
        firstAmount: 1,
        firstPrice: parseInt(this.storeFreightTemDto.firstLabel),
        isDefault: this.storeFreightTemDto.type ? 1 : 0,
        name: this.storeFreightTemDto.name,
        storeId: this.print.id,
        templateType: parseInt(this.storeFreightTemDto.label),
      };
      const res = await this.axios.addStoreFreightTemList(obj);
      if (res.data.code === 200) {
        this.$message({
          message: "添加成功",
          type: "success",
          duration: 2000,
          onClose: () => {
            this.dialogVisible = false;
            this.getStoreFreightTemList();
          },
        });
      } else {
        this.$message({
          message: res.data.message,
          type: "warning",
        });
      }
    },
    async updateStoreFreightTemList() {
      //  更新运费模板
      let obj = {
        continueAmount: 1,
        continuePrice: parseInt(this.storeFreightTemDto.lastLabel),
        des: this.storeFreightTemDto.content,
        firstAmount: 1,
        firstPrice: parseInt(this.storeFreightTemDto.firstLabel),
        isDefault: this.storeFreightTemDto.type ? 1 : 0,
        name: this.storeFreightTemDto.name,
        storeId: this.print.id,
        templateType: parseInt(this.storeFreightTemDto.label),
        id: this.temState,
      };
      const res = await this.axios.updateStoreFreightTemList(obj);
      if (res.data.code === 200) {
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 2000,
          onClose: () => {
            this.dialogVisible = false;
            this.getStoreFreightTemList();
          },
        });
      } else {
        this.$message({
          message: res.data.message,
          type: "warning",
        });
      }
    },
    async deleteStoreFreightTemList(id) {
      //  删除运费模板
      let obj = {
        id,
        storeId: this.print.id,
      };
      const res = await this.axios.deleteStoreFreightTemList(obj);
      if (res.data.code === 200) {
        this.$message({
          message: "删除成功",
          type: "success",
          duration: 2000,
          onClose: () => {
            this.getStoreFreightTemList();
          },
        });
      } else {
        this.$message({
          message: res.data.message,
          type: "warning",
        });
      }
    },
    sendOver() {
      if (this.temState === -1) {
        this.addStoreFreightTemList();
      } else {
        this.updateStoreFreightTemList();
      }
    },
    freightDelete(row) {
      // 点击删除
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteStoreFreightTemList(row.id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    freightAdd(temState) {
      // 打开添加弹窗
      this.storeFreightTemDto = {
        name: "",
        label: "1",
        firstLabel: null,
        lastLabel: null,
        content: "",
        type: false,
      };
      this.dialogVisible = true;
      this.temState = temState;
    },
    freightEdit(row) {
      // 打开修改弹窗
      this.dialogVisible = true;
      this.storeFreightTemDto = {
        name: row.name,
        label: row.templateType + "",
        firstLabel: row.firstPrice,
        lastLabel: row.continuePrice,
        content: row.des,
        type: !!row.isDefault,
      };
      this.temState = row.id;
    },
  },
  components: {
    StoreLeftmenus,
    Breadcrumb,
  },
  computed: {
    ...mapState({
      print: (state) => state.print.all,
    }),
  },
};
</script>

<style lang="scss" scoped>
.freightemplate {
  display: flex;
  justify-content: center;
  .freightemplate-main {
    width: 1100px;
    background-color: #fff;
    padding: 10px;
    .freightemplate-main_content {
      border: 1px solid rgba(229, 230, 234, 1);
      border-top: 0;
      margin: 15px 0;
      .contenttitle {
        box-sizing: border-box;
        padding: 10px;
        line-height: 28px;
        font-weight: bold;
        height: 50px;
        background-color: rgba(245, 245, 245, 1);
        border-top: 2px solid rgba(176, 184, 184, 1);
      }
      .freightemplate-main_contentFirst {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 20px;
        .main_contentFirst-header {
          padding: 10px 0;
        }
      }
    }
  }
  .dialog-input {
    display: flex;
    margin-bottom: 15px;
    p {
      min-width: 80px;
      line-height: 40px;
      margin-left: 5px;
    }
  }
}
</style>
